<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>getElementsByName的使用</title>
    <script>
      //给三个按钮动态绑定点击事件
      window.onload = function() {
        //得到三个按钮的dom对象
        var all = document.getElementById("all");
        var allNot = document.getElementById("allNot");
        var reverse = document.getElementById("reverse");

        all.onclick = function() {
          //1.得到三个多选框的 dom 对象
          var sports = document.getElementsByName("sport");
          //sports是一个nodeList，即一个集合
          //alert(sports);
          for (let i = 0; i < sports.length; i++) {
            sports[i].checked = true;
          }
        }

        allNot.onclick = function() {
          //1.得到三个多选框的 dom 对象
          var sports = document.getElementsByName("sport");
          //sports是一个nodeList，即一个集合
          //alert(sports);
          for (let i = 0; i < sports.length; i++) {
            sports[i].checked = false;
          }
        }

        reverse.onclick = function() {
          //1.得到三个多选框的 dom 对象
          var sports = document.getElementsByName("sport");
          //sports是一个nodeList，即一个集合
          //alert(sports);
          for (let i = 0; i < sports.length; i++) {
            if (sports[i].checked) {  //反着来
              sports[i].checked = false;
            } else {
              sports[i].checked = true;
            }
          }
        }
      }
    </script>
  </head>

  <body>
    你会的运动项目：
    <input type="checkbox" name="sport" value="football" checked="checked">足球
    <input type="checkbox" name="sport" value="tq">台球
    <input type="checkbox" name="sport" value="pp">乒乓球<br/>
    <br/><input type="button" id="all" value="全选">
    <input type="button" id="allNot" value="全不选">
    <input type="button" id="reverse" value="反选">
  </body>
</html>